<template>
	<view class="wrap">
		<u-navbar
			fixed
			safeAreaInsetTop
			placeholder
			:bgColor="scrollHeight > 60 ? '#fff' : 'transparent'"
			:title="detailInfo.name"
			leftIconColor="#333"
			titleStyle="#333"
			autoBack
		>
		</u-navbar>
		<image :src="detailInfo.raceBg" v-if="detailInfo.raceBg" class="top-img"></image>
		<view class="top-img" v-else :style="{ background: detailInfo.raceColor || defaultBg }"></view>
		<view class="main-wrap">
			<view class="top">
				<u-swiper
					:list="detailInfo.focusArr"
					height="286rpx"
					circular
					indicator
					:indicatorActiveColor="detailInfo.raceColor || '#0071c5'"
					indicatorMode="dot"
				></u-swiper>
			</view>
			<view class="main">
				<view class="main-time">
					<view class="main-time-txt">
						<u-divider text="距离比赛开始还有" textColor="#333" lineColor="#c3c3c3"></u-divider>
					</view>
					<u-count-down :time="timeShow" format="HH:mm:ss" autoStart millisecond @change="onChange">
						<view class="time">
							<view class="time__custom">
								<view
									class="time__custom__item"
									:style="{ 'background-color': detailInfo.raceColor || '#0071c5' }"
								>
									{{ timeData.days > 9 ? timeData.days : '0' + timeData.days }}
								</view>
								<text class="time__custom__desc">Days</text>
							</view>
							<view class="time__custom">
								<view
									class="time__custom__item"
									:style="{ 'background-color': detailInfo.raceColor || '#0071c5' }"
								>
									{{ timeData.hours > 9 ? timeData.hours : '0' + timeData.hours }}
								</view>
								<text class="time__custom__desc">Hours</text>
							</view>
							<view class="time__custom">
								<view
									class="time__custom__item"
									:style="{ 'background-color': detailInfo.raceColor || '#0071c5' }"
								>
									{{ timeData.minutes > 9 ? timeData.minutes : '0' + timeData.minutes }}
								</view>
								<text class="time__custom__desc">Mins</text>
							</view>
							<view class="time__custom" style="margin: 0">
								<view
									class="time__custom__item"
									:style="{ 'background-color': detailInfo.raceColor || '#0071c5' }"
								>
									{{ timeData.seconds > 9 ? timeData.seconds : '0' + timeData.seconds }}
								</view>
								<text class="time__custom__desc">Secs</text>
							</view>
						</view>
					</u-count-down>
				</view>

				<view class="main-content">
					<view class="main-content-tlt">活动介绍</view>
					<u-parse :content="detailInfo.raceInfo"></u-parse>
				</view>
			</view>
			<view class="footer">
				<!-- <u-button
				text="已报名"
				color="#718daa"
				customStyle="width:420rpx;border-radius:14rpx;"
				v-if="isSign"
			></u-button> -->
				<u-button
					text="立即报名"
					:color="!isOpen ? '#ccc' : detailInfo.raceColor || '#0071c5'"
					:throttleTime="1000"
					@click="onSign"
					:customStyle="{
						borderColor: `${!isOpen ? '#ccc' : detailInfo.raceColor || '#0071c5'}`,
						borderRadius: '14rpx'
					}"
				></u-button>
				<u-button
					text="报名查询"
					color="#fff"
					:customStyle="{
						borderColor: `${detailInfo.raceColor || '#0071c5'}`,
						color: `${detailInfo.raceColor || '#0071c5'}`,
						width: '238rpx',
						borderRadius: '14rpx',
						marginLeft: '24rpx'
					}"
					@click="$utils.navigateTo(true, '/pagesA/my/order/list?raceId=' + detailInfo.id)"
				></u-button>
			</view>
		</view>
	</view>
</template>

<script>
const app = getApp()
export default {
	data() {
		return {
			imgUrl: app.globalData.ossUrl,
			defaultBg: 'linear-gradient(0deg, #f7f7f7 0%, #ffffff 20%, #549fd8 100%)',
			detailInfo: {},
			timeData: {},
			timeShow: '',
			articleList: [],
			isSign: false, //是否报名
			id: '',
			scrollHeight: 0
		}
	},
	onPageScroll(e) {
		this.scrollHeight = e.scrollTop
	},
	computed: {
		// 判断是否在报名时间内
		isOpen() {
			const { applyStartTime, applyEndTime } = this.detailInfo
			if (!applyStartTime || !applyEndTime) {
				return false
			} else {
				const now = new Date().getTime()
				const startTime = new Date(applyStartTime).getTime()
				const endTime = new Date(applyEndTime).getTime()
				return now >= startTime && endTime - now >= 0
			}
		}
	},
	onLoad(options) {
		console.log(options)
		if (options.scene) {
			const obj = decodeURIComponent(options.scene)
			this.id = obj.split('=')[1]
		} else {
			this.id = options.id
		}
		app.globalData.signInfo = {}
		this.getInfo(this.id)
		if (wx.getStorageSync('token')) {
			this.getOrderInfo(this.id)
		}
	},
	methods: {
		getInfo(id) {
			uni.showLoading({ title: '数据加载中' })
			/* prettier-ignore */
			this.$https(false, 'get', {
				url: '/race/race/info/'+id
			}, (res) => {
				res.data.focusArr = res.data.focus?JSON.parse(res.data.focus):[]
				this.detailInfo = res.data
				this.timeShow = new Date(res.data.start).getTime() -  new Date().getTime()
				uni.setNavigationBarTitle({
					title: res.data.name
				})
			})
			/* prettier-ignore */
		},
		// 判断赛事报名状态
		getOrderInfo(id) {
			uni.showLoading({ title: '数据加载中' })
			/* prettier-ignore */
			this.$https(false, 'get', {
				url: '/race/race/order/'+id
			}, (res) => {
				this.isSign = res.data>0
			})
			/* prettier-ignore */
		},
		onChange(e) {
			this.timeData = e
		},
		// 报名
		onSign() {
			const { detailInfo } = this
			if (!this.isOpen) {
				const now = new Date().getTime()
				const startTime = new Date(detailInfo.applyStartTime).getTime()
				const endTime = new Date(detailInfo.applyEndTime).getTime()
				if (now < startTime) {
					uni.$u.toast('报名未开始！')
				} else if (now > endTime) {
					uni.$u.toast('报名已结束！')
				}
				return
			}

			if (!uni.getStorageSync('token')) {
				uni.navigateTo({
					url: '/pages/login/wxLogin'
				})
			} else {
				uni.navigateTo({
					url: '/pagesA/sign/shengming',
					success: (res) => {
						res.eventChannel.emit('parentEvent', this.detailInfo)
					}
				})
			}
			//  else if (detailInfo.isRead === 1) {
			// 	uni.navigateTo({
			// 		url: '/pagesA/sign/shengming',
			// 		success: (res) => {
			// 			res.eventChannel.emit('parentEvent', {
			// 				id: detailInfo.id,
			// 				name: detailInfo.name,
			// 				isQuestions: detailInfo.isQuestions,
			// 				isSign: detailInfo.isSign,
			// 				content: detailInfo.raceRemind
			// 			})
			// 		}
			// 	})
			// } else if (detailInfo.isQuestions == 1) {
			// 	this.$utils.navigateTo(true, `/pagesA/sign/question?id=${detailInfo.id}`)
			// } else if (detailInfo.isSign == 1) {
			// 	this.$utils.navigateTo(true, `/pagesA/sign/qianming?id=${detailInfo.id}`)
			// } else {
			// 	this.$utils.navigateTo(true, '/pagesA/sign/detail?id=' + detailInfo.id)
			// }
		}
	}
}
</script>

<style lang="scss" scoped>
.wrap {
	position: relative;
	padding-bottom: 130rpx;
}
.top {
	padding: 14rpx 28rpx;
	&-img {
		display: block;
		width: 100%;
		top: 0;
		left: 0;
		position: absolute;
		height: 580rpx;
	}
}
.main {
	padding: 16rpx 26rpx;
	&-wrap {
		position: relative;
		z-index: 2;
	}

	&-time {
		width: 100%;
		height: 232rpx;
		padding-top: 20rpx;
		border-radius: 14rpx;
		background-color: #fff;
		&-txt {
			text-align: center;
			font-size: 30rpx;
			color: #333;
			position: relative;
			padding: 0 100rpx 20rpx;
		}
	}
	&-content {
		background-color: #fff;
		margin-top: 20rpx;
		padding: 20rpx 24rpx 30rpx;
		&-tlt {
			border-bottom: 1px solid #cfcfcf;
			padding-bottom: 20rpx;
			margin-bottom: 24rpx;
			font-size: 30rpx;
			font-weight: 600;
			&:before {
				content: '';
				display: inline-block;
				width: 8rpx;
				height: 30rpx;
				background-color: #0071c5;
				float: left;
				margin: 8rpx 12rpx 0 6rpx;
			}
		}
	}
}
.time {
	display: flex;
	margin: 0 auto;
	&__custom {
		display: flex;
		align-items: center;
		margin-right: 20rpx;
		&__item {
			width: 74rpx;
			height: 60rpx;
			line-height: 62rpx;
			text-align: center;
			background-color: #0071c5;
			color: #fff;
			font-size: 34rpx;
			font-weight: 600;
			color: #fff;
			margin: 0 !important;
		}
		&__desc {
			text-align: center;
			display: block;
			margin: 16rpx 0 0 8rpx !important;
			color: #727171;
		}
	}
}

.flex {
	display: flex;
	align-items: center;
}
.flex-between {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.footer {
	width: calc(100% - 56rpx);
	padding: 0 28rpx;
	height: 120rpx;
	background-color: #fff;
	position: fixed;
	bottom: 0;
	left: 0;
	padding-top: 24rpx;
	display: flex;
	justify-content: space-between;
}
</style>
